<template>
  <div>
    <div class="navWrap">
      <div class="navScrollWrap">
        <el-menu :default-active="$route.path" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
                 :collapse="isCollapse" unique-opened router>

          <!--本地-->
          <template >
            <template v-for="item in items">
              <!--有二级目录-->
              <template v-if="item.subs&&item.subs.length>0">
                <el-submenu :index="item.index">
                  <!--父菜单-->
                  <template slot="title">
                    <i :class="item.icon"></i>
                    <span slot="title">{{item.title}}</span>
                  </template>
                  <!--子菜单-->
                  <!--有三级菜单-->
                  <template v-for="(sub, i) in item.subs">
                    <el-submenu v-if="sub.children" :key="i" :index="sub.index">
                      <template slot="title">
                        <i :class="sub.icon"></i>
                        <span slot="title">{{sub.title}}</span>
                      </template>
                      <el-menu-item v-for="(subChild, k) in sub.children" :key="k" :index="subChild.index">
                        <i :class="sub.icon"></i>{{subChild.title}}
                      </el-menu-item>
                    </el-submenu>
                    <!--无三级菜单-->
                    <el-menu-item :key="i" :index="sub.index" v-else><i class="iconfont icon-cloud-bike"></i>{{sub.title}}
                    </el-menu-item>
                  </template>
                  <!--子菜单结束-->

                </el-submenu>
              </template>
              <!--无二级目录-->
              <template v-else>
                <div class="noChildNav">
                  <el-menu-item :index="item.index">
                    <i :class="item.icon"></i> <span style="line-height: 46px">{{ item.title }}</span>
                  </el-menu-item>
                </div>
              </template>
            </template>
          </template>

        </el-menu>
      </div>
    </div>
    <div class="navBg"></div>
  </div>
</template>

<script>

  export default {
    props: ["navItems"],
    data() {
      return {
        isShowNav: true,
        rows: [],
        itemsBase: [
          {
            icon: 'iconfont icon-zonglan',
            title: '数据总览',
            index: '/homePage',
          },
          {
            index: '11',
            icon: 'iconfont icon-tingchechang1',
            title: '停放管理',
            subs: [
              {
                index: '/parking',
                title: '停放区管理'
              },
              {
                index: '/parkingMap',
                title: '停放一张图'
              }
            ]
          },
          {
            icon: 'iconfont icon-zonglan',
            title: '投放管理',
            index: '/putMap',
          },
          {
            index: '4',
            icon: 'iconfont icon-tingfang',
            title: '案件管理',
            subs: [
              {
                index: '/reportManage',
                title: '案件列表'
              },
            ]
          },
          // {
          //   icon: 'iconfont icon-zonglan',
          //   title: '行业总览监测',
          //   index: '/home',
          // },
          {
            icon: 'iconfont icon-xitong',
            title: '总量控制',
            index: '/config/total',
          },
          {
            index: '1',
            icon: 'iconfont icon-tingchechang1',
            title: '停放资源管理',
            subs: [
              {
                index: '/parkingArea',
                title: '停放(禁停)区管理'
              },
              {
                index: '/monitoringArea',
                title: '重点区域管理'
              },
              {
                index: '/illegalArea',
                title: '禁停区管理'
              },
            ]
          },
          {
            index: '2',
            icon: 'iconfont icon-sheshi2',
            title: '基础设施管理',
            subs: [
              {
                index: '/facilityPicture',
                title: '设施一张图'
              },
              {
                index: '/siteAndRail',
                title: '站点围栏'
              },
              {
                index: '/smartPile',
                title: '智能设备'
              }
            ]
          },
          {
            index: '3',
            icon: 'iconfont icon-tongji1',
            title: '统计分析决策',
            subs: [
              {
                index: '/statis/total',
                title: '车辆总数'
              },
              {
                index: '/statis/excess',
                title: '超量告警'
              },
              {
                index: '/statis/illegalPark',
                title: '违停案件数'
              },
              {
                index: '/statis/case',
                title: '执法案件数'
              }
            ]
          },
          {
            index: '5',
            icon: 'iconfont icon-xitong',
            title: '系统权限管理',
            subs: [
              {
                index: '/systemUser',
                title: '监管平台用户'
              },
              {
                index: '/mobileUser',
                title: '移动端用户'
              },
              {
                index: '/operationLogs',
                title: '操作日志'
              },
              {
                index: '/roleManage',
                title: '角色管理'
              },
            ]
          },
        ],
        items: [],
        isCollapse: false
      };
    },
    created(){
      if (process.env.NODE_ENV == 'development') {
        this.items=this.itemsBase
      }else {
        this.items=this.navItems
      }
    },
    mounted () {

    },
    computed: {

    },
    methods: {
      getNavInfo(){
        this.axios.post(process.env.API_HOST + `/system/selectUserMenu`,{sysUserId:this.$store.state.userInfo.sysUserId})
          .then(response => {
            const result = response.data
            if (result.code === 200) {
              this.items=[]
              result.result.forEach((item,index)=>{
                this.items.push({
                  index: item.url,
                  icon: item.icon,
                  title: item.menuName,
                })
                  if(item.childValues.length>0){
                    this.items[index].subs=[]
                    item.childValues.forEach(item1=>{
                      this.items[index].subs.push({
                        index: item1.url,
                        title: item1.menuName
                      })
                    })
                  }
              })
             /* this.rows = result.data.menus
              const menus = result.data.menus
              //获取首页
              if (menus[0].menus) {
                this.$store.commit('getFirstPage', menus[0].menus[0].url)
              } else {
                this.$store.commit('getFirstPage', "/home")
              }*/
            }
          })
      },

      handleOpen(key, keyPath) {
//        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
//        console.log(key, keyPath);
      }
    }
  }
</script>
<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/mixin.styl"
  .navWrap
    width 195px
    margin-top 43px
    position absolute
    left 0
    top 0px
    bottom 0
    overflow-x hidden
    .navScrollWrap
      width 220px
      position absolute
      left 0
      top 0
      bottom 0
      ::-webkit-scrollbar
        display none
      .el-menu-vertical-demo
        background-color #efefef
        overflow-y auto
        overflow-x hidden
        position relative
        left 0
        top 0
        width: 220px;
        height 100%
        z-index 10
        &:before
          content: "";
          position absolute
          top 0
          left 0px
          width 180px
          height 100%
          background-color white
          bottom 0px
        .el-submenu
          width: 195px;
          &.is-active
            .el-submenu__title
              background-color #3975FE;
              .iconfont, span
                color white !important
          ul, .el-menu
            width 180px
            background-color white
          .el-menu-item
            height 35px
            line-height 35px !important
            width 180px
            min-width 180px !important
            font-size 13px
            color #aaaaaa
            &.is-active
              color: #3975FE;
              width 180px
              min-width 180px !important
            .iconfont
              /*font-weight bold*/
              font-size 17px;
              margin-right 6px
          .el-submenu__title
            height 46px
            line-height 46px !important
            border-radius 0 20px 20px 0
            background-color white
            box-shadow: 0px 6px 7px 0px rgba(4, 0, 0, 0.04);
            margin-bottom 6px
            .el-submenu__icon-arrow, .el-icon-arrow-down
              display none
            .iconfont, span
              color #3975FE
            .iconfont
              margin-left 7px
              margin-right 5px
            span
              font-weight bold
      .noChildNav
        margin-top 12px
        width 195px
        border-radius 0 20px 20px 0 !important
        background-color white
        box-shadow: 0px 6px 7px 0px rgba(4, 0, 0, 0.04);
        margin-bottom 6px
        .el-menu-item
          height 46px
          line-height 46px !important
          background-color white
          border-radius 0 20px 20px 0 !important
          box-shadow: 0px 6px 7px 0px rgba(4, 0, 0, 0.04);
          &.is-active
            background-color #3975FE
            border-radius 0 20px 20px 0 !important
            box-shadow: 0px 6px 7px 0px rgba(4, 0, 0, 0.04);
            .iconfont, span
              color white !important
          .iconfont, span
            color #3975FE
          .iconfont
            margin-left 7px
            margin-right 5px
          span
            font-weight bold
  .el-submenu__title:hover,.el-menu-item:hover
    background: #5482ea !important;color white !important
    .iconfont, span
      color white !important

</style>
